import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// import {
//   createStyleImportPlugin,
//   AndDesignVueResolve,
//   VantResolve,
//   ElementPlusResolve,
//   NutuiResolve,
//   AntdResolve,
// } from 'vite-plugin-style-import'
import {createStyleImportPlugin, ElementPlusResolve} from 'vite-plugin-style-import'
import Markdown from 'vite-plugin-md'
// import { VitePWA } from 'vite-plugin-pwa'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
import { prismjsPlugin } from 'vite-plugin-prismjs';

function resovePath(paths: string) {
    // 如何 __dirname 找不到 需要 yarn add @types/node --save-dev
    return path.resolve(__dirname, paths)
}

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            include: [/\.vue$/, /\.md$/],
        }),
        WindiCSS(),
        // {
        //   safelist: markdownWrapperClasses,
        // }
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',
        }),
        Pages({
            // 自动读取src/views(默认值为src/pages)下的view文件,生成路由信息,默认路由路径'/'
            dirs: [{dir: 'src/views', baseRoute: '/'}],
            // 异步方式加载路由组件
            importMode: 'async',
            // 识别带有vue和md后缀的文件为路由（md文件需要有插件支持）
            extensions: ['vue', 'md'],
            // 当识别到的文件路径包含以下字段时，会自动剔除，比如我们的一些特定的小组件
            exclude: ['**/components/*'], // 这里的作用是将src目录下，不将含有component字段的组件生成为页面
            // 遍历路由信息,给默认路由加一个redirect
            extendRoute(route) {
                console.log('vite-plugin-pages', route)
                if (route.path === '/') {
                    return {...route} // , redirect: 'user'
                }
            },
            // 整体处理整个routes的信息，然后进行相应的处理
            // onRoutesGenerated(routes) {
            //   const temp_routes = JSON.parse(JSON.stringify(routes))
            //   temp_routes.forEach((item: any) => {
            //     // 这里依然是判断一下路由中包含了fruit字符串的，更换layout
            //     if (item.path.includes('fruit')) {
            //       item.meta = {
            //         layout: 'home',
            //       }
            //     }
            //   })
            //   return temp_routes
            // },
            // 这里涉及到更改客户端代码
            // onClientGenerated(clientCode) {
            //   // 能够完整获取到我们实际生成的路由的完整代码，string格式的，
            //   // 感觉可以通过正则对这个方法进行替换，或者各种字符串骚操作进行替换
            //   return clientCode
            // },
            routeBlockLang: 'json5',
        }),
        Layouts({defaultLayout: 'default'}),
        // 自定义方式 默认为src/layouts
        // Layouts({
        //   layoutsDirs: 'src/layouts',
        //   defaultLayout: 'myDefault',
        // }),
        AutoImport({
            include: [/\.[tj]sx?$/, /\.vue$/, /\.md$/],
            imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
            resolvers: [ElementPlusResolver()],
            dts: 'types/auto-imports.d.ts',
        }),
        Components({
            dirs: ['src/components'], // 导入组件的目录的相对路径
            deep: true, //搜索子目录
            dts: 'types/components.d.ts',
            // 内置Resolver可以按需导入许多组件库,例如element-plus和sass
            // 好用的 不需要在main.ts中进行app.use,可以按需加载组件和样式
            resolvers: [
                // auto import icons
                // https://github.com/antfu/unplugin-icons
                // import IconsResolver from 'unplugin-icons/resolver'
                // IconsResolver({
                //   componentPrefix: '',
                //   // enabledCollections: ['carbon']
                // }),
                ElementPlusResolver({
                    importStyle: 'sass',
                }),
            ],
        }),
        Markdown(),
        // {
        // import Prism from 'markdown-it-prism'
        // import LinkAttributes from 'markdown-it-link-attributes'
        // const markdownWrapperClasses = 'prose prose-sm m-auto text-left'
        // wrapperClasses: markdownWrapperClasses,
        // headEnabled: true,
        // markdownItSetup(md) {
        //   // https://prismjs.com/
        //   md.use(Prism)
        //   md.use(LinkAttributes, {
        //     pattern: /^https?:\/\//,
        //     attrs: {
        //       target: '_blank',
        //       rel: 'noopener',
        //     },
        //   })
        // },
        // }
        createStyleImportPlugin({
            resolves: [ElementPlusResolve()],
            libs: [
                // If you don’t have the resolve you need, you can write it directly in the lib, or you can provide us with PR
                // {
                //   libraryName: 'ant-design-vue',
                //   esModule: true,
                //   resolveStyle: (name) => {
                //     return `ant-design-vue/es/${name}/style/index`
                //   },
                // },
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    ensureStyleFile: true,
                    resolveStyle: (name: string | any[]) => {
                        // name = name.slice(3)
                        console.log('name', name)
                        // return `element-plus/packages/theme-chali/src/${name}.scss`
                        return `element-plus/theme-chalk/${name}.css`
                    },
                },
            ],
        }),
        // https://github.com/antfu/vite-plugin-pwa
        // VitePWA({
        //   registerType: 'autoUpdate',
        //   includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
        //   manifest: {
        //     name: 'Vitesse',
        //     short_name: 'Vitesse',
        //     theme_color: '#ffffff',
        //     icons: [
        //       {
        //         src: '/pwa-192x192.png',
        //         sizes: '192x192',
        //         type: 'image/png',
        //       },
        //       {
        //         src: '/pwa-512x512.png',
        //         sizes: '512x512',
        //         type: 'image/png',
        //       },
        //       {
        //         src: '/pwa-512x512.png',
        //         sizes: '512x512',
        //         type: 'image/png',
        //         purpose: 'any maskable',
        //       },
        //     ],
        //   },
        // }),
        vueJsx(),
        prismjsPlugin({
            // languages: 'all',
            // 配置行号插件
            plugins: ['line-numbers'],
            // 主题名
            // theme: 'coy',
            css: true,
        }),
    ],
    resolve: {
        alias: {
            '@': resovePath('src'),
            '@/': resovePath('src/'),
            '~': resovePath('types'),
            '~/': resovePath('types/'),
        },
    },
    css: {
        preprocessorOptions: {
            // less: {
            //   charset: false,
            //   javascriptEnabled: true,
            //   // 这样就能全局使用 src/assets/styles/global.less 定义的 变量
            //   additionalData: `@import "${resovePath('src/assets/styles/global.less')}";`,
            // },
            scss: {
                charset: false,
                javascriptEnabled: true,
                additionalData: '@use "@/assets/styles/variables.scss" as *;',
            },
        },
    },
    server: {
        open: true,
        port: 1024,
        proxy: {
          // "/dev": {
          //   target: "http://10.1.3.66:9080/",
          //   changeOrigin: true,
          //   rewrite: (path) => path.replace(/^\/dev/, ""),
          // },
          "/sse": {
            target: "http://127.0.0.1:8080/sse",
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/sse/, ""),
          },
        },
    },
    build: {
        target: 'modules',
        outDir: 'dist',
        assetsDir: 'static/img',
        rollupOptions: {
            output: {
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            },
        },
        cssCodeSplit: true,
        sourcemap: false,
        // terserOptions: {
        //   compress: {
        //     keep_infinity: true,
        //     // Used to delete console in production environment
        //     // drop_console: VITE_DROP_CONSOLE,
        //   },
        // },
        // Turning off brotliSize display can slightly reduce packaging time
        brotliSize: false,
        chunkSizeWarningLimit: 2000,
    },
})
